{% extends "base.html" %}

{% block title %}Home - ShopEasy{% endblock %}

{% block content %}
<div class="px-4 py-6 sm:px-0">
    <h1 class="text-3xl font-bold text-gray-900 mb-6">Featured Products</h1>
    
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-6">
        {% for product in products %}
        <div class="bg-white rounded-lg overflow-hidden card-shadow hover:shadow-lg transition-shadow duration-300">
            <div class="relative h-48 bg-gray-200">
                <img src="{{ product.image_url }}" alt="{{ product.name }}" class="w-full h-full object-cover">
            </div>
            <div class="p-4">
                <h2 class="text-lg font-medium text-gray-900">{{ product.name }}</h2>
                <p class="mt-1 text-sm text-gray-500 line-clamp-2">{{ product.description }}</p>
                <div class="mt-2 flex items-center justify-between">
                    <p class="text-lg font-semibold text-indigo-600">${{ "%.2f"|format(product.price) }}</p>
                    <span class="text-xs text-gray-500">In Stock: {{ product.stock }}</span>
                </div>
                <div class="mt-4">
                    <a href="/product/{{ product.id }}" class="text-sm font-medium text-indigo-600 hover:text-indigo-500 mr-3">View Details</a>
                    {% if user %}
                    <form action="/cart/add/{{ product.id }}" method="post" class="inline">
                        <button type="submit" class="text-sm font-medium text-green-600 hover:text-green-500">Add to Cart</button>
                    </form>
                    {% else %}
                    <a href="/login" class="text-sm font-medium text-green-600 hover:text-green-500">Add to Cart</a>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}
